<template>
  <div class="page-list-live">
    <el-card class="box-card bottomCard">
      <div slot="header" class="clearfix">
        <div class="box">设置备份</div>
      </div>
      <!-- <div>
        备份文件夹: <el-input></el-input>
        <el-switch v-model="value1" active-text="开启备份"></el-switch>
      </div>-->
      <el-form ref="form" :model="form" label-width="100px" inline>
        <el-form-item label="备份文件夹">
          <el-input v-model="form.backupDirectory" placeholder="请填写备份文件夹" />
        </el-form-item>
        <el-form-item label="是否开启备份">
          <el-switch v-model="form.enable" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="enableHandle">设置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <br />
    <PageList>
      <template #header>数据备份</template>
      <template #filter>
        <ListFilter :form="topFilter" @search="handleSearch" @reset="handleReset" />
      </template>
      <!-- <template #topButton>
      </template>-->
      <template #table>
        <ListTable ref="RefListTable" :loading="tableLoading" :table-data="tableData" :table-col="tableCol" />
      </template>
    </PageList>
  </div>
</template>
<script>
import listMixin from '@/mixins/list'
import ListFilter from '@/components/ListFilter'
import { backupLog, backupSetting, backupSettingList } from '@/api/api'
import { parseTime } from '@/utils/index'
export default {
  name: 'DataBackups',
  components: { ListFilter },
  mixins: [listMixin],
  data() {
    return {
      id: '',
      form: {
        backupDirectory: '', // 备份文件夹
        enable: false // 是否开启备份
      },
      topFilter: {
        date: { type: 'date', arr: ['timeStart', 'timeStart'] }
      },
      tableData: [],
      tableCol: [
        { prop: 'backupFor', label: '备份项目', minWidth: '130px' },
        {
          prop: 'timeStart', label: '开始日期', minWidth: '160px',
          formatter: function(row, col, cell) {
            return parseTime(new Date(cell), '{y}-{m}-{d} {h}:{i}:{s}')
          }
        },
        {
          prop: 'timeEnd', label: '结束日期', minWidth: '160px',
          formatter: function(row, col, cell) {
            return parseTime(new Date(cell), '{y}-{m}-{d} {h}:{i}:{s}')
          }
        },
        {
          prop: 'hasError', label: '状态', minWidth: '160px',
          formatter: function(row, col, cell) {
            return row.hasError ? row.message : '成功'
          }
        },
        { prop: 'fileSize', label: '文件大小', minWidth: '100px' },
        { prop: 'filelink', label: '文件路径', minWidth: '280px' }
      ]
    }
  },
  mounted() {
    this.getbackupSetting()
  },
  methods: {
    // 开启备份
    async enableHandle() {
      try {
        if (!this.form.backupDirectory) {
          return this.$message.warning('请填写备份文件夹！')
        }
        const response = await backupSetting('put', { id: this.id, backupDirectory: this.form.backupDirectory, enable: this.form.enable }, false)
        if (response.code >= 200 && response.code < 300) {
          this.$message.success('操作成功！')
          this.getList()
        } else {
          this.$message.success('操作失败！')
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 请求列表数据
    async getList(qurey) {
      this.tableLoading = true
      try {
        const obj = qurey || { pageIndex: 1, pageSize: 10, orderBy: 'createdTime', orderByAscent: false }
        const { data: { items: resData, count, pageIndex }} = await backupLog('post', obj, false)
        this.tableData = []
        this.tableData = resData
        this.$nextTick(() => {
          this.$refs['RefListTable'].update({ page: pageIndex, count })
          this.tableLoading = false
        })
      } catch (err) {
        this.tableLoading = false
        console.error('getList err: ', err)
      }
    },
    async getbackupSetting() {
      try {
        const { data: backupSettingResData, code } = await backupSettingList('get')
        if (code >= 200 && code < 300) {
          this.id = backupSettingResData.id || 1
          this.form.backupDirectory = backupSettingResData.backupDirectory || ''
          this.form.enable = backupSettingResData.enable || false
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .bottomCard {
    ::v-deep.el-card__header {
      background-color: #d3dbeb;
    }
  }

  // .box {
  //   color: #fff !important;
  // }
</style>
